import React, { useState } from 'react';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import type { RadioChangeEvent, SelectProps } from 'antd';
import { message, Upload } from 'antd';
import '../../styles/addInform.less';
import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import { history } from 'umi';
import {
    Button,
    Form,
    Input,
    Radio,
    Select,
    Switch
} from 'antd';
type SizeType = Parameters<typeof Form>[0]['size'];

type Props = {}
//照片上传
const getBase64 = (img: RcFile, callback: (url: string) => void) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result as string));
    reader.readAsDataURL(img);
};

const beforeUpload = (file: RcFile) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
};

const onChange = (e: CheckboxChangeEvent) => {
    console.log(`checked = ${e.target.checked}`);
};
const options: SelectProps['options'] = [];

for (let i = 10; i < 36; i++) {
    options.push({
        value: i.toString(36) + i,
        label: i.toString(36) + i,
    });
}

const handleChange = (value: string) => {
    console.log(`selected ${value}`);
};
const AddInform = (props: Props) => {
    //图片上传
    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState<string>();
    const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj as RcFile, (url) => {
                setLoading(false);
                setImageUrl(url);
            });
        }
    };
    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div style={{ marginTop: 8 }}>Upload</div>
        </div>
    );

    const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');

    const onFormLayoutChange = ({ size }: { size: SizeType }) => {
        setComponentSize(size);
    };
    const [value, setValue] = useState(1);

    const onChange = (e: RadioChangeEvent) => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };
    const gotoNext = () => {
        history.push('/home/addStock');
      }
    return (
        <Form
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 14 }}
            layout="horizontal"
            initialValues={{ size: componentSize }}
            onValuesChange={onFormLayoutChange}
            size={componentSize as SizeType}
            style={{ maxWidth: 600 }}
        >
            <Form.Item label="商品类型：" className='item'>
                <Radio.Group defaultValue="a" size="large" className='group'>
                    <Radio.Button value="a" className='Radio'>普通商品</Radio.Button>
                    <Radio.Button value="b" className='Radio'>卡密/网盘</Radio.Button>
                    <Radio.Button value="c" className='Radio'>优惠券</Radio.Button>
                    <Radio.Button value="d" className='Radio'>虚拟商品</Radio.Button>
                </Radio.Group>
            </Form.Item>
            <Form.Item label="商品分类：">
                <Select
                    mode="tags"
                    style={{ width: '100%' }}
                    placeholder="请选择商品分类"
                    onChange={handleChange}
                    options={options}
                />
            </Form.Item>
            <Form.Item label="商品名称：">
                <Input />
            </Form.Item>
            <Form.Item label="单位：">
                <Input />
            </Form.Item>
            <Form.Item label='商品轮播图'>
                <Upload
                    name="avatar"
                    listType="picture-card"
                    className="avatar-uploader"
                    showUploadList={false}
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    beforeUpload={beforeUpload}
                    onChange={handleChange}
                >
                    {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                </Upload>
            </Form.Item>
            <Form.Item label="添加视频：" valuePropName="checked">
                <Switch />
            </Form.Item>
            <Form.Item label='商品状态'>
                <Radio.Group onChange={onChange} value={value}>
                    <Radio value={1}>上架</Radio>
                    <Radio value={2}>下架</Radio>
                </Radio.Group>
            </Form.Item>
            <Form.Item >
                <Button className='but' type="primary" htmlType="submit" onClick={() => gotoNext()}>下一步</Button>
            </Form.Item>
        </Form>
    )
}

export default AddInform